<template>
  <div class="container">
    <div class="rowOne">
      <div class="rowOneLeft">
        <img src="../../assets/img/indexHeader/1.png" alt="" @click="$router.push({path:'/'})">
      </div>
      <div class="rowOneRight">
        <img src="../../assets/img/emitPlan/2.png" alt="">
      </div>
    </div>
    <div class="rowTwo">
      <p class="p1">某母婴类产品（广告主名称）AI智投方案</p>
      <p class="p2">根据您的行业状况、投放目标、品牌效果推广的占比、投放地域等定向需求，</p>
      <p class="p2 p3">以及200000元预算，您的AI智投方案如下</p>
    </div>
    <div class="rowThree">
      <p>某母婴类产品（广告主名称）传播策略分析</p>
    </div>
    <div class="rowFour">
      <div class="rowFour1">
        <div class="rowFour11">
          <p>
            <img src="../../assets/img/emitPlan/4.png" alt="">
            <span>品牌分析</span>
          </p>
        </div>
        <div class="rowFour12">
          <div class="one">
            <div class="oneL">
              <p>
                <img src="../../assets/img/emitPlan/5.png" alt="">
                <span>品牌诉求</span>
              </p>
            </div>
            <div class="oneR">
              <span class="commoneSpan" v-for="(item,index) in (resultPlan.brandAppeal.split('&'))" :key="index">{{item}}</span>
            </div>
          </div>
          <div class="two" style="margin-top:10px;">
            <div class="oneL">
              <p>
                <img src="../../assets/img/emitPlan/6.png" alt="">
                <span>基本情况</span>
              </p>
            </div>
            <div class="oneR">
              <span class="commoneSpan" v-for="(item,index) in (resultPlan.basicInformation.split('&'))" :key="index">{{item}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="rowFour2">
        <div class="rowFour11">
          <p>
            <img src="../../assets/img/emitPlan/9.png" alt="">
            <span>受众画像</span>
          </p>
        </div>
        <div class="rowFour12">
          <div class="one">
            <div class="oneL oneLow">
              <p>
                <img src="../../assets/img/emitPlan/11.png" alt="">
                <span>人群属性</span>
              </p>
            </div>
            <div class="oneR oneRow">
              <span class="commoneSpan">{{resultPlan.portrait.split('&')[0].split(".")[1]}}</span>
            </div>
          </div>
          <div class="two">
            <div class="one">
              <div class="oneL oneLow">
                <p>
                  <img src="../../assets/img/emitPlan/14.png" alt="">
                  <span>社会角色</span>
                </p>
              </div>
              <div class="oneR oneRow">
                <span class="commoneSpan">{{resultPlan.name}}</span>
              </div>
            </div>
          </div>
          <div class="three">
            <div class="one">
              <div class="oneL oneLow">
                <p>
                  <img src="../../assets/img/emitPlan/15.png" alt="">
                  <span>投放区域</span>
                </p>
              </div>
              <div class="oneR oneRow">
                <span class="commoneSpan">{{resultPlan.portrait.split('&')[1].split('.')[1]}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="rowFour3 rowFour2">
        <div class="rowFour1">
          <div class="rowFour11 rowFour13">
            <p>
              <img src="../../assets/img/emitPlan/16.png" alt="">
              <span>传播周期</span>
            </p>
          </div>
          <div class="rowFour12">
            <div class="one">
              <div class="oneR rowFourR13">
                <span class="commoneSpan">{{resultPlan.diffusionCycle}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="rowFour4 rowFour3 rowFour2">
        <div class="rowFour1">
          <div class="rowFour11 rowFour13 rowFour14">
            <p>
              <img src="../../assets/img/emitPlan/19.png" alt="">
              <span>推广策略</span>
            </p>
          </div>
          <div class="rowFour12">
            <div class="one">
              <div class="oneR rowFourR13 rowFourR14">
                <span class="commoneSpan" v-for="(item,index) in (resultPlan.promotionTactic.split('&'))" :key="index">{{item}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="rowFour3"></div>
            <div class="rowFour4"></div>  -->
    </div>
    <div class="rowThree">
      <p>某母婴类产品（广告主名称）媒体组合方案</p>
    </div>
    <div class="rowFive">
      <div class="part">
        <span>Part1</span>
      </div>
      <div class="content" v-for="(item,index) in resultPart1" :key="index" @mousemove="getIndex1(index)">
        <div style="width:50%;float:left;border-right:1px solid gray;">
          <div class="logo">
            <img :src="item.logo" alt="" width="80px" height="80px">
          </div>
          <div class="media">
            <p>媒体名称：{{item.mediaName}}</p>
            <p>所属类别：{{item.type}}</p>
            <p>特点：{{item.characteristic}}</p>
          </div>
        </div>
        <div style="width:50%;float:left;">
          <div style="float:left;" class="price">
            <p>参考价格：{{item.referencePrice}}</p>
            <p>预算配置：{{item.budget}}元</p>
          </div>
          <div style="float:right;margin-right:60px;">
            <button style="display:block;" @click="addCtrl(resultPart1,index)" @mousemove="changeColor1(index)">
              <img src="" alt="">
              <span :class="{colorWhite:part1Index==index,colorBlack:part1Index!=index}">加入收藏夹</span>
            </button>
            <button style="display:block;" @click="check(resultPart1,index)" :class="{btnBgRed:part1Index==index,btnBgWhite:part1Index!=index}" @mousemove="changeColor1(index)">
              <img src="" alt="">
              <span :class="{colorWhite:part1Index==index,colorBlack:part1Index!=index}">查看详情</span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="rowFive">
      <div class="part">
        <span>Part2</span>
      </div>
      <div class="content" v-for="(item,index) in resultPart2" :key="index">
        <div style="width:50%;float:left;">
          <div class="logo">
            <img :src="item.logo" alt="" width="80px" height="80px">
          </div>
          <div class="media">
            <p>媒体名称：{{item.mediaName}}</p>
            <p>所属类别：{{item.type}}</p>
            <p>特点：{{item.characteristic}}</p>
          </div>
        </div>
        <div style="width:50%;float:left;">
          <div style="float:left;" class="price">
            <p>预算配置：{{item.budget}}元</p>
          </div>
          <div style="float:right;margin-right:60px;">
            <button style="display:block;" @click="addCtrl(resultPart2,index)" @mousemove="changeColor1(index)">
              <img src="" alt="">
              <span :class="{colorWhite:part1Index==index,colorBlack:part1Index!=index}">加入收藏夹</span>
            </button>
            <button style="display:block;" @click="check(resultPart2,index)" :class="{btnBgRed:part1Index==index,btnBgWhite:part1Index!=index}" @mousemove="changeColor1(index)">
              <img src="" alt="">
              <span :class="{colorWhite:part1Index==index,colorBlack:part1Index!=index}">查看详情</span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="rowFive">
      <div class="part">
        <span>Part3</span>
      </div>
      <div class="content" v-for="(item,index) in resultPart3" :key="index">
        <div style="width:50%;float:left;">
          <div class="logo">
            <img :src="item.logo" alt="" width="80px" height="80px">
          </div>
          <div class="media">
            <p>媒体名称：{{item.mediaName}}</p>
            <p>所属类别：{{item.type}}</p>
            <p>简介：{{item.about}}</p>
          </div>
        </div>
        <div style="width:50%;float:left;">
          <div style="float:left;" class="price">
            <p>参考价格：{{item.referencePrice}}</p>
            <p>预算配置：{{item.budget}}元</p>
          </div>
          <div style="float:right;margin-right:60px;">
            <button style="display:block;" @click="addCtrl(resultPart3,index)" @mousemove="changeColor1(index)">
              <img src="" alt="">
              <span :class="{colorWhite:part1Index==index,colorBlack:part1Index!=index}">加入收藏夹</span>
            </button>
            <button style="display:block;" @click="check(resultPart3,index)" :class="{btnBgRed:part1Index==index,btnBgWhite:part1Index!=index}" @mousemove="changeColor1(index)">
              <img src="" alt="">
              <span :class="{colorWhite:part1Index==index,colorBlack:part1Index!=index}">查看详情</span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="rowFive">
      <div class="part">
        <span>Part4</span>
      </div>
      <div class="content" v-for="(item,index) in resultPart4" :key="index">
        <div style="width:50%;float:left;">
          <div class="logo">
            <img :src="item.logo" alt="" width="80px" height="80px">
          </div>
          <div class="media">
            <p>媒体名称：{{item.mediaName}}</p>
            <p>所属类别：{{item.type}}</p>
            <p>简介：{{item.about}}</p>
          </div>
        </div>
        <div style="width:50%;float:left;">
          <div style="float:left;" class="price">
            <p>预算配置：{{item.budget}}元</p>
          </div>
          <div style="float:right;margin-right:60px;">
            <button style="display:block;" @click="addCtrl(resultPart4,index)" @mousemove="changeColor1(index)">
              <img src="" alt="">
              <span :class="{colorWhite:part1Index==index,colorBlack:part1Index!=index}">加入收藏夹</span>
            </button>
            <button style="display:block;" @click="check(resultPart4,index)" :class="{btnBgRed:part1Index==index,btnBgWhite:part1Index!=index}" @mousemove="changeColor1(index)">
              <img src="" alt="">
              <span :class="{colorWhite:part1Index==index,colorBlack:part1Index!=index}">查看详情</span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="rowSix">
      <button v-for="(item,index) in btnDown" :key="index" :class="{bgcolor:index==downIndex,bgimg:index!=downIndex}" @mouseover="changedownIndex(index)" @click="download(index)">{{item}}</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showPDF: "",
      getUrl: "",
      btnName: ["加入收藏夹", "查看详情"],
      btnDown: ["保存并下载方案", "立即获取预估效果"],
      downIndex: 1,
      resultPlan: "",
      resultPart1: "",
      resultPart2: "",
      resultPart3: "",
      resultPart4: "",
      part1Index: "",
      content1Index: ""
    };
  },
  methods: {
    getIndex1(index) {
      this.content1Index = index;
    },
    changeColor1(index) {
      this.part1Index = index;
    },
    changedownIndex(index) {
      this.downIndex = index;
    },
    async download(index) {
      if (index == 0) {
        // 下载生成PDF接口
        await this.$ajax
          .post(this.Ipurl + "aiInfo/getPDF?aiId=" + this.id)
          .then(res => {
            if (res.data.returnCode == 1000) {
              this.getUrl = res.data.dataInfo;
              window.location.href =
                this.Ipurl +
                "FileUpLoad/downLoad?fileUrl=" +
                this.getUrl +
                "&fileName=AIScheme.pdf";
            }
          });
      } else if (index == 1) {
        // 评估接口
      }
    },
    // 加入收藏夹
    async addCtrl(part, index) {
      if (window.sessionStorage.getItem("userInfo")) {
        await this.$ajax
          .post(this.Ipurl + "favoriteInfo/save", {
            userId: JSON.parse(window.sessionStorage.getItem("userInfo"))
              .userId,
            popularMediaId: part[index].popularMediaId,
            type: part[index].type
          })
          .then(res => {
            if (res.data.returnCode == 1000) {
              this.$message("添加成功");
            } else if (res.data.returnCode == 2000) {
              this.$message("sorry!已经收藏了");
            } else {
              this.$message.error("添加失败");
            }
          });
      } else {
        this.$confirm("检测到您并没有登录", "warning", {
          confirmButtonText: "立即登录",
          cancelButtonText: "不了，谢谢",
          type: "warning"
        }).then(() => {
          this.$router.push("/login");
        });
      }
    },
    // 查看详情
    async check(part, index) {
      this.$router.push({
        path: "/view2/shortVideoDetail",
        query: { id: part[index].popularMediaId }
      });
    },
    async getPlan() {
      await this.$ajax
        .post(this.Ipurl + "aiInfo/queryByAiId?aiId=" + this.id)
        .then(res => {
          console.log(res.data.dataInfo, "getPlan");
          if (res.data.returnCode == 1000) {
            this.resultPlan = res.data.dataInfo;
          } else {
            this.$message.error("读取信息失败");
          }
        });
    },
    async getpart1() {
      await this.$ajax
        .post(this.Ipurl + "aiInfo/queryList?aiId=" + this.id + "&part=Part1")
        .then(res => {
          if (res.data.returnCode == 1000) {
            this.resultPart1 = res.data.dataInfo;
            console.log(this.resultPart1, "part1");
          } else {
            this.$message.error("读取信息失败");
          }
        });
    },
    async getpart2() {
      await this.$ajax
        .post(this.Ipurl + "aiInfo/queryList?aiId=" + this.id + "&part=Part2")
        .then(res => {
          if (res.data.returnCode == 1000) {
            this.resultPart2 = res.data.dataInfo;
            console.log(this.resultPart2, "part2");
          } else {
            this.$message.error("读取信息失败");
          }
        });
    },
    async getpart3() {
      await this.$ajax
        .post(this.Ipurl + "aiInfo/queryList?aiId=" + this.id + "&part=Part3")
        .then(res => {
          if (res.data.returnCode == 1000) {
            this.resultPart3 = res.data.dataInfo;
            console.log(this.resultPart3, "part3");
          } else {
            this.$message.error("读取信息失败");
          }
        });
    },
    async getpart4() {
      await this.$ajax
        .post(this.Ipurl + "aiInfo/queryList?aiId=" + this.id + "&part=Part4")
        .then(res => {
          if (res.data.returnCode == 1000) {
            this.resultPart4 = res.data.dataInfo;
            console.log(this.resultPart4, "part4");
          } else {
            this.$message.error("读取信息失败");
          }
        });
    }
  },
  mounted() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.getPlan();
      this.getpart1();
      this.getpart2();
      this.getpart3();
      this.getpart4();
    }
  }
};
</script>
<style scoped>
.btnBgRed {
  width: 200px;
  height: 30px;
  background: url("../../assets/img/emitPlan/btnbg1.png");
  text-align: center;
  line-height: 30px;
}
.btnBgRed span.colorWhite {
  color: #fff;
}
.btnBgWhite {
  width: 200px;
  height: 30px;
  background: url("../../assets/img/emitPlan/btnbg2.png");
  text-align: center;
  line-height: 30px;
}
.btnBgWhite span.colorBlack {
  color: #000;
}
.container {
  width: 1200px;
  margin: 0 auto;
}
.rowOne {
  overflow: hidden;
}
.rowOneLeft {
  float: left;
}
.rowOneLeft img {
  margin-top: 30px;
}
.rowOneRight {
  float: right;
  margin-top: 50px;
}
.rowTwo {
  text-align: center;
}
.p1 {
  font-size: 24px;
  font-weight: bold;
}
.p2 {
  font-size: 14px;
  color: rgb(102, 102, 102);
  margin-top: 50px;
}
.p3 {
  margin-top: 5px;
}
.rowThree {
  width: 100%;
  height: 37px;
  line-height: 37px;
  margin-top: 50px;
  text-align: center;
  background: #ee4041;
}
.rowThree p {
  font-size: 16px;
  color: #fff;
}
.rowFour {
  margin-top: 20px;
  overflow: hidden;
}
.rowFour > div {
  overflow: hidden;
}
.rowFour1 div {
  float: left;
}
.rowFour11 {
  width: 210px;
  height: 170px;
  background: url("../../assets/img/emitPlan/3.png");
  text-align: center;
  line-height: 170px;
  float: left;
}
.rowFour13 {
  height: 50px;
  background: url("../../assets/img/emitPlan/17.png");
  line-height: 50px;
}
.rowFour14 {
  height: 110px;
  line-height: 110px;
  background: url("../../assets/img/emitPlan/21.png");
}
.rowFour12 {
  margin-left: 20px;
  float: left;
  width: 970px;
  overflow: hidden;
}
.rowFour12 div {
  overflow: hidden;
}
.rowFour p > span {
  font-size: 16px;
  margin-left: 10px;
}
.oneL {
  width: 210px;
  height: 80px;
  text-align: center;
  line-height: 80px;
  background: url("../../assets/img/emitPlan/7.png");
  float: left;
}
.oneLow {
  height: 50px;
  background: url("../../assets/img/emitPlan/12.png");
  line-height: 50px;
}
.oneR {
  width: 740px;
  height: 80px;
  text-align: center;
  background: url("../../assets/img/emitPlan/8.png");
  float: left;
  margin-left: 20px;
}
.oneRow {
  height: 50px;
  background: url("../../assets/img/emitPlan/8.png");
}
.oneRow > span {
  line-height: 50px;
  margin-top: 0px;
}
.commoneSpan {
  display: block;
  font-size: 14px;
  margin-left: 60px;
  text-align: left;
  margin-top: 12px;
  color: rgb(102, 102, 102);
}
.rowFour2 {
  margin-top: 10px;
}
.two,
.three {
  margin-top: 10px;
}
.rowFourR13 {
  width: 970px;
  height: 50px;
  background: url("../../assets/img/emitPlan/18.png");
  margin-left: 0px;
}
.rowFourR13 span {
  line-height: 50px;
  margin-top: 0px;
}
.rowFourR14 {
  height: 110px;
  background: url("../../assets/img/emitPlan/21.png");
}
.rowFourR14 span {
  line-height: normal;
  margin-top: 10px;
}
.rowFourR14 span:first-child {
  margin-top: 20px;
}
.rowFive {
  margin-top: 20px;
}
.part {
  width: 210px;
  height: 50px;
  background: url("../../assets/img/emitPlan/17.png");
  line-height: 50px;
  text-align: center;
  overflow: hidden;
}
.part span {
  font-size: 16px;
}
.content {
  width: 100%;
  height: 150px;
  margin-top: 20px;
  background: url("../../assets/img/emitPlan/bg.png");
  overflow: hidden;
}
.logo {
  /* 这里的logo图片最好是做80*80的。 */
  width: 90px;
  height: 90px;
  background: url("../../assets/img/emitPlan/28.png");
  margin-left: 60px;
  margin-top: 30px;
  line-height: 90px;
  text-align: center;
  float: left;
}
.media {
  float: left;
  margin-left: 90px;
}
.media > p {
  font-size: 16px;
  color: rgb(34, 34, 34);
}
.media > p {
  margin-top: 20px;
}
.media > p:nth-child(1) {
  margin-top: 30px;
}
.price {
  margin-left: 60px;
  margin-top: 25px;
}
.price p {
  font-size: 16px;
  margin-top: 20px;
}
.rowSix {
  margin-top: 60px;
  margin-bottom: 80px;
}
.rowSix button {
  width: 200px;
  height: 50px;
  border-radius: 20px;
  font-size: 16px;
}
.rowSix button:nth-child(1) {
  margin-left: 384px;
}
.rowSix button:nth-child(2) {
  margin-left: 50px;
}
.rowSix button.bgimg {
  background: url("../../assets/img/emitPlan/32.png");
  color: #000;
}
.rowSix button.bgcolor {
  background: #ee4041;
  color: #fff;
}
</style>


